<template>
	<view>
		<view class="bg-white fixed" style="top: 20rpx;">
			<view class="solids-bottom flex align-center">
				<view class="flex-sub">
					<view class="padding-xs" @click="chooseBusiness">
						<text class="text-bold">{{businessmanInfo.name}}</text>
						<text class="cuIcon-right"></text>
					</view>
					<view class="padding">
						<!-- <text class="text-red">11.1km</text> -->
						<view class="text-cut" style="width:220px">{{businessmanInfo.address}}</view>
					</view>
				</view>
				<view class="padding">
					<text class="cu-btn bg-red shadow-blur round">到店</text>
				</view>
			</view>
		</view>
		<view v-if="goods && goods.length>0" class="container">
			<view style="display: flex;">
				<scroll-view class="menu-wrapper" scroll-y :style="'height:'+height+'px'">
					<view ref="menuWrapper">
						<view style="position: relative;" v-for="(item,index) in goods" :key="index" ref="menuList" @click="select(index)"
						 :class="{'current': currentIndex == index}">
							<view class="menu-item">{{item.name}}</view>
							<text class="allcount" v-if="getAllCount>=item.count&&item.count>0">{{item.count}}</text>
						</view>
					</view>
				</scroll-view>
				<!--  @scroll="scroll" -->
				<scroll-view class="foods-wrapper" scroll-y :style="'height:'+height+'px'" :scroll-top="foodSTop">
					<view ref="foodsWrapper">
						<view ref="foodList" class="foods" v-for="(item, i) in goods" :key="i">

							<view class="food-title" style="background: #f3f5f7">
								<text class="text-bold text-shadow padding-xl">{{item.name}}</text>
							</view>
							<view class="food" v-for="(food, index) in item.foods" :key="index">
								<image :src="food.picUrl" mode="" style="width: 75px;height: 75px;margin-top: 6px;"></image>
								<view class="food-info">
									<text style="font-size: 15px;margin-top: 2px;">{{food.name}}</text>
									<!-- 加减 -->
									<view class="food-btm">
										<text class="food-price">￥{{food.retailPrice}}</text>
										<cartcontrol :food="food" @add="addCart" @dec="decreaseCart"></cartcontrol>

									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<shopcart :goods="goods" @add="addCart" @dec="decreaseCart" @delAll="delAll"></shopcart>
			</view>
		</view>

	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	import shopcart from './shopcart.vue';
	import cartcontrol from './cartcontrol.vue'
	import Vue from 'vue'
	import goodapi from '../../api/good.js'
	import businessmanapi from '../../api/businessman.js'

	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				dotStyle: false,
				scrollLeft: 0,
				goods: [],
				height: 0,
				foodSTop: 0,
				currentIndex: 0,
				businessmanInfo: {}
			}

		},
		components: {
			shopcart,
			cartcontrol,
			empty
		},
		onLoad() {
			this.height = Number(uni.getSystemInfoSync().windowHeight) - 135;
		},

		computed: {
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							result.push(food)
						}
					})
				})
				return result

			},
			// 获得购物车所有商品数量
			getAllCount: function(item) {
				let result = [];
				let count = 0;

				for (let i = 0; i < this.goods.length; i++) {
					count = 0;
					this.goods[i].foods.forEach((food) => {

						if (food.count >= 0) {
							count += food.count
							Vue.set(this.goods[i], 'count', count)
						}
					})
					result.push(count)
				}

				result.sort(function(a, b) {
					return a - b;
				})
				count = result[result.length - 1]
				return count;
			},

		},
		methods: {
			...mapMutations(['selectBusiness']),
			chooseBusiness() {
				uni.navigateTo({
					url: '../businessman/businessman'
				})
			},
			// todo 查询最近的商家
			getnearby() {
				uni.showLoading({
					title: '请求中...'
				})
				var businessmanInfo = uni.getStorageSync('businessmanInfo')
				if (!businessmanInfo) {
					businessmanapi.getnearby({
						success: res => {
							var nearbusinessman = res.data.data
							const infoData = {
								'id': nearbusinessman.id,
								'address': nearbusinessman.address,
								'name': nearbusinessman.name
							}
							this.businessmanInfo = infoData
							this.selectBusiness(infoData)
							uni.removeStorageSync('desktop')
							this.getgoodslist()
						},
						fail: err => {
							uni.hideLoading()
							uni.showToast({
								title: '请求失败',
								duration: 1500
							})
						}
					})
				} else {
					this.businessmanInfo = businessmanInfo
					this.getgoodslist()
					uni.hideLoading()
				}
			},
			getgoodslist() {
				goodapi.getList({
					success: res => {
						this.goods = res.data.data
						uni.hideLoading()
					},
					fail: err => {
						uni.hideLoading()
						uni.showToast({
							title: '请求失败',
							duration: 1500
						})
					}
				});
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			// 点击侧边栏
			select(index) {
				this.currentIndex = index;
				this.setScrollH(index);

			},

			// 设置点击侧边栏右边滚动的高度
			setScrollH: function(index) {
				var that = this;
				let height = 0;
				var query = uni.createSelectorQuery();
				let foods = query.selectAll('.foods');

				this.$nextTick(function() {
					foods.fields({
						size: true
					}, data => {
						if (index == 0) {
							that.foodSTop = 0;
						}
						for (let i = 0; i < index; i++) {

							height += parseInt(data[i].height);
							that.foodSTop = height;
						}
					}).exec();
				})

			},

			addCart: function(item) {
				if (item.count >= 0) {
					item.count++
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								food.count = item.count
						})
					})

				} else {
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								Vue.set(food, 'count', 1)
						})
					})
				}

			},
			decreaseCart(item) {
				if (item.count) {
					item.count--
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								food.count = item.count
						})
					})
				}
			},
			// 清空购物车
			delAll() {
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							food.count = 0
						}
					})
				})
			}
		},
		created() {
			this.getnearby();
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		position: absolute;
		top: 0;
		bottom: 55px;
		width: 100%;
		overflow: hidden;
	}

	.current {
		position: relative;
		z-index: 0;
		background-color: #fff;
		color: #00A0DC;
	}

	.menu-wrapper {
		text-align: center;
		width: 22%;
		display: flex;
		flex-direction: column;
		background: #f3f5f7;

	}

	.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
	}

	.allcount {
		position: absolute;
		right: 6px;
		top: 8px;
		display: inline-block;
		padding: 0px 10rpx;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}

	.foods-wrapper {
		margin-left: 4px;
		width: 78%;
	}

	.food,
	.food-btm,
	.content {
		display: flex;
		flex-direction: row;
	}

	.food-title {
		padding: 2px 0;
	}

	.food-info {
		padding-top: 10upx;
		margin-left: 10px;
		margin-right: 16px;
		display: flex;
		flex-direction: column;
		flex: 2;
	}

	.food-btm {
		justify-content: space-between;

	}

	.food-price {
		color: #f01414;
		font-size: 16px;
		padding-top: 50upx;
	}
</style>
